<template>
  <div class="iconSelect">
    <div class="iconSelect-opera">
      <van-button type="default" size="mini" @click="useOperatorBoxStore().showOverlay(false, '')">取消</van-button>
      <span>选择图标</span>
      <van-button type="primary" size="mini">恢复默认</van-button>
    </div>
    <div class="iconSelect-search">
      <van-search
          v-model="keyWord"
          placeholder="请输入搜索关键词"
          @search="onSearch"
      />
    </div>
    <div class="iconSelect-icons">
      <keep-alive>
        <SwiperTab :swiper-list="options" @handleChangeCurrentTab="handleChange">
          <icon-list :iconList="icon[currentTab]"></icon-list>
        </SwiperTab>
      </keep-alive>
    </div>
  </div>
</template>

<script setup>
// 作者：YCH
// 时间：2023年2月16日 22:31:06
import {ref} from "vue";
import SwiperTab from "@/components/tabs/swiperTab.vue";
import IconList from "@/components/list/iconList.vue";
import icon from "@/assets/json/icon.json";
import useOperatorBoxStore from "@/stores/modules/operatorBox.js";

const keyWord = ref("");
const options = ref(Object.keys(icon));
const currentTab = ref(0);
const handleChange = (val) => {
  currentTab.value = val;
}
const onSearch = (val) => {
  console.log(val)
};

</script>

<style lang="less" scoped>
.iconSelect {
  position: relative;
  padding: 10px 12px;
  font-family: var(--primary-font-family);
  font-weight: bold;
  color: var(--primary-font-color);

  .iconSelect-opera {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .iconSelect-search{
    height: 40px;
    display: flex;
    align-items: center;
    .van-search{
      width: 100%;
    }
  }
  .iconSelect-icons{
    min-height: 56vh;
  }


}
</style>
